<template>
  <div class="side-card">
    <header v-if="title">
      <slot name="title">
        {{ title }}
      </slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script>
export default {
  name: "side-card",
  props: {
    title: String
  }
}
</script>

<style lang="less" scoped>
.side-card {
  background-color: #fff;
  .size(260px,auto);
  header {
    .flex-center();
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
    border-bottom: 1px solid #f1f1f1;
  }
}

</style>